<template>
 <div style="margin: 0px;">
    <!-- 黑层 -->
    <div class="Permissiond" :style="{zIndex: zindex,backgroundColor:whitecolor,display:showd ? 'block':'none'}">
        <span :style="{ display:showd ? 'block':'none'}">🔒权限不足</span>
    </div>
    <div style="background-color: rgb(232, 237, 244);width: 100%;width: 100%;">
        <el-row :gutter="20" style="">
         <el-col :span="16" style="height: 1060px;overflow: scroll;">
            <div class="grid-content bg-purple" id="topdiv" >
                <img class="imgtop" src="../../assets/img/portal/11.png" alt="" >

                <el-table :data="tableData"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'90px','background':'blue'}" stripe style="width: 100%;">
                    <el-table-column prop="contractPortalId"  label="合同id" width="180" ></el-table-column>
                    <el-table-column prop="contractName"  label="合同名称" width="180" ></el-table-column>
                    <el-table-column prop="contractNumber" label="合同编号" width="180"></el-table-column>
                    <el-table-column prop="founder" label="创建日期"></el-table-column>
                    <el-table-column prop="customerName" label="客户名称"></el-table-column>
                    <el-table-column prop="personInCharge" label="负责人"></el-table-column>
                    <el-table-column prop="contractPrice" label="合同金额"></el-table-column>
                    <el-table-column prop="contractStatus" label="合同状态"></el-table-column>
                    <el-table-column prop="status" label="待用"></el-table-column>
                </el-table>

            </div>
         </el-col>

         <el-col :span="8">
            <div class="grid-content bg-purple" id="te1">
                <img class="imgtop2" src="../../assets/img/portal/12.png" alt="">
                <div class="licenter" >
                    <div class="licenternei">
                        <div style="display: flex;">
                            <img src="../../assets/img/portal/6.png" alt="">
                            <div style="margin-top: 6px;">
                                <span>32500万元</span><br>
                                <span>销售合同额</span>
                            </div>
                        </div>
                    </div>
                    <div class="licenternei">
                        <div style="display: flex;">
                            <img src="../../assets/img/portal/6.png" alt="">
                            <div style="margin-top: 6px;">
                                <span>72</span><br>
                                <span>销售合同数量</span>
                            </div>
                        </div>
                    </div>
                    <div class="licenternei">
                        <div style="display: flex;">
                            <img src="../../assets/img/portal/7.png" alt="">
                            <div style="margin-top: 6px;">
                                <span>+6.52%</span><br>
                                <span>同比增长</span>
                            </div>
                        </div>
                    </div>
                    <div class="licenternei">
                        <div style="display: flex;">
                            <img src="../../assets/img/portal/8.png" alt="">
                            <div style="margin-top: 6px;">
                                <span>423.50</span><br>
                                <span>采购合同金额</span>
                            </div>
                        </div>
                    </div>
                    <div class="licenternei">
                         <div style="display: flex;">
                            <img src="../../assets/img/portal/9.png" alt="">
                            <div style="margin-top: 6px;">
                                <span>48场</span><br>
                                <span>采购合同数量</span>
                        </div>
                        </div>
                    </div>
                    <div class="licenternei">
                        <div style="display: flex;">
                            <img src="../../assets/img/portal/9.png" alt="">
                            <div style="margin-top: 6px;">
                                <span>+2.05%</span><br>
                                <span>同比增长</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="grid-content bg-purple"  id="te2">
                <div>
                    <img @click="payment" style="width: 100%;height: 80px;" src="../../assets/img/portal/1.ping.png" alt="">
                    <span style="font-size: 15px;">合同记录</span>
                </div>
                <div>
                    <img @click="approval" style="width: 100%;height: 80px;" src="../../assets/img/portal/2.png" alt="">
                    <span style="font-size: 15px;">合同审批</span>
                </div>
                <div>
                    <img @click="payment" style="width: 100%;height: 80px;" src="../../assets/img/portal/3.png" alt="">
                    <span style="font-size: 15px;">待用</span>
                </div>
                <div>
                    <img @click="vchart" style="width: 100%;height: 80px;" src="../../assets/img/portal/4.png" alt="">
                    <span style="font-size: 15px;">合同报表</span>
                </div>

            </div>
         </el-col>
         <el-col :span="8" style="overflow: auto;">
                <div class="grid-content bg-purple" id="te3" style="margin-top: 10px;">
                   <div style="display: flex;margin-left: 40px;padding-top: 20px;">
                     <span>新增合同条款</span>
                   </div>
                   <el-table :data="tableData3"  style="width: 100%;">
                                <el-table-column prop="text" label=""></el-table-column>
                    </el-table>
                </div>
            </el-col>

        </el-row>

        <el-row :gutter="20">


        </el-row>


    </div>

 </div>

</template>

<script>
import { selectContractAll } from '../../api/contract'
export default{
    data(){
        return{
          activeName: 'first',
          zindex: "",
          // backcolor: '',
          showd:true,
          tableData: [],

          tableData3:[
            {
                text: `一般采购合同所有权转移及风险承担条款1
                       标的物所有权自标的物交付时起转移。出卖人就交付的标的物，负有保证第三人不向买受人主张任何权利的义务。`
            },
             {
                text: `一般采购合同所有权转移及风险承担条款1
                       标的物所有权自标的物交付时起转移。出卖人就交付的标的物，负有保证第三人不向买受人主张任何权利的义务。`
            },
             {
                text: `一般采购合同所有权转移及风险承担条款1
                       标的物所有权自标的物交付时起转移。出卖人就交付的标的物，负有保证第三人不向买受人主张任何权利的义务。`
            }
          ]
        }
    },
    methods:{
        selectContractAll(){
            const token = localStorage.getItem('Authorization')
            console.log("令牌："+token)
            selectContractAll().then(res=>{
                console.log(res)
                if(res.code == 200 ){
                    this.tableData = res.result
                    this.showd = !this.showd
                    console.log("777"+this.tableData)
                }else if(res.code == 500){
                    this.zindex = '1000'
                    this.showd = this.showd
                }else{
                    console.log("错误")
                }
            })
        },
        payment(){
         this.$router.push('/maheimei/table1')

        },
        vchart(){
            this.$router.push('/maheimeicom/vchart')
        },
        approval(){
            this.$router.push('/maheimei/contractapproval')
        }
    },
    mounted(){
      this.selectContractAll()
    }
}
</script>

<style scoped>
.Permissiond{
    position: fixed;
    width: 100%;
    height: 100%;
    color: rgb(234, 240, 246);
    padding-left: 35%;
    padding-top: 20%;
    font-size: 50px;
    background-color: white ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
li{
    list-style: none;
}
.imgtop{
    width: 100%;
    width: 100%;
    height: 150px;
}
.imgtop2{
    width: 100%;
    width: 100%;
    height: 150px;
}

#topdiv{
    width: 100%;
    width: 100%;
    text-align: center;
    height: 650px;
    background-color: rgb(255, 255, 255);
}
#te1{
    width:  100%;
    width:  100%;
    height: 510px;
}
#te2{
    width: 100%;
    width: 100%;
    height: 130px;
    display: flex;

}
#te2 div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    margin-left: 20px;

}
#zhongdiv{
    height: 100%;
    width: 100%;
    height: 100%;
    width: 100%;
}
#te3{
    width: 100%;
    width: 100%;
    height: 400px;

}
#buttondiv{
    height: 450px;
    width: 100%;
    width: 100%;
}
#te4{
    width: 100%;
    width: 100%;
    height: 450px;
}
#te2{
    margin-top: 10px;
}

.licenter{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    width: 100%;
    height: 355px;
    margin-left: 20px;
}
.licenternei{
    width: 200px;
}
.Risk1{
    display: flex;
    margin-top: 40px;
    margin-left: 30px;
}
.Risk2 ul{
  margin-top: 40px;
}
.Riskul li{
    margin-top: 25px;
    list-style-type: square
}
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background:  rgb(232, 237, 244);
  }
  .bg-purple {
    background: rgb(255, 255, 255);
  }
  .bg-purple-light {
    background: #ffffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  /* ddd */
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
